<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>首页</title>
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="icon/iconfont.css">
  </head>
  <body>
    <!-- 头部 -->
    <header>

      <div class="">
        <!-- logo区域 -->
        <div class="logo">
            <h1>C<em>a</em>lm</h1>
            <span>欢迎来到我的博客</span>
        </div>
        <!-- 导航栏 -->
        <nav>
          <ul>
            <li>首页</li>
            <li>新闻</li>
            <li>公告</li>
            <li>联系</li>
          </ul>
        </nav>
      </div>
      <div class="box2">
        <!-- 左侧 -->
        <div class="box-left">
          <div class="">
            <h3>Welcome Ladies & Gents to Calm Website.</h3>
          </div>
          <div class="">
            A theme more stylish than any other on ThemeForest.
          </div>
        </div>
        <!-- 右侧 -->
        <div class="box-left">
          <div class="">
            <h3>联系我</h3>
          </div>
          <div class="img-box">
            <ul>
              <li class="qq">
                <i class="iconfont icon-qq"></i>
              </li>
              <li class="wechat">
                  <i class="iconfont icon-wechat"></i>
              </li>
              <li class="weibo">
                <i class="iconfont icon-weibo"></i>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </header>
    <!-- 内容 -->
    <div class="content">
      <div class="content-box">
        <!-- 标签 -->
        <div class="unit">
          <ul>
            <li>All</li>
            <li>图片</li>
            <li>文字</li>
            <li>语音</li>
            <li>视频</li>
          </ul>
        </div>
        <!-- 图片列表 -->
        <div class="list-box">
          <ul>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
            <li>
              <img src="img/Layer-73.png" alt="" />
              <div class="">
                图片1
              </div>
              <div class="">
                图片1
              </div>
            </li>
          </ul>
        </div>
      </div>
      <div class="">
        <!-- 新闻栏 -->
        <div class="">

        </div>
        <div class="">

        </div>
        <div class="">

        </div>
        <div class="">

        </div>
      </div>
    </div>
    <!-- 尾部 -->
    <footer>
      <div class="">

      </div>
      <div class="">
        <nav>

        </nav>
      </div>
    </footer>
  </body>
</html>
